<template>
  <div>
    <el-row>
      <div style="margin-top: 10px;">知识名称：<span v-html="this.knowledgeName"></span></div>
      <div style="margin-top: 10px;">
        <el-table highlight-current-row :data="this.tableData" :height="this.tableHeight">
          <el-table-column label="操作人" prop="operator"/>
          <el-table-column label="操作字段" prop="operationField"/>
          <el-table-column label="操作动作" prop="modification"/>
          <el-table-column label="发生步骤" prop="operationAction"/>
          <el-table-column label="修改对比" width="100">
            <template slot-scope="scope">
              <el-link type="primary" @click="viewDifference(scope.row.operationField, scope.row.recordTime)">对比
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作时间" prop="recordTime" width="200"/>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <div style="margin-top: 10px;">
        <el-col :span="24">
          <div>
            <el-pagination
              v-if="this.multiplePages"
              :page-size="this.pageSize"
              :total="this.totalNum"
              background
              layout="prev, pager, next"
              style="text-align: center;"
              @current-change="handleCurrentChange"/>
          </div>
        </el-col>
      </div>
    </el-row>
    <el-dialog :visible.sync="dialogVisible"
               title="对比"
               @close="dialogVisible = false"
               width="80%">
      <div>
        <el-row>
          <el-col :span="12">
            <div style="margin-left: 10px;">{{ this.fieldName }}</div>
          </el-col>
          <el-col :span="12">
            <div style="margin-left: 10px;">修改时间：<span>{{ this.modifyTime }}</span></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div style="padding: 10px; border: solid 1px #C9C9C9; margin: 10px;">
              <p>
                <span v-html="this.oldValue"></span>
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="background-color: #F0F8F8; padding: 10px; border: solid 1px #C9C9C9; margin: 10px;">
              <p>
                <span v-html="this.newValue"></span>
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="ke-dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "KnowledgeFieldCompare",
  props:['id','status'],
  data() {
    return {
      knowledgeName: "偏头痛",
      tableData: [{
        id: "-",
        operator: "-",
        operationAction: "-",
        operationField: "-",
        recordTime: "-"
      }],
      multiplePages: false,
      pageSize: 10,
      totalNum: 0,
      currentPage: 0,
      tableHeight: 0,
      fieldName: "",
      modifyTime: "",
      oldValue: "",
      newValue: "",
      dialogVisible: false
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    viewDifference(fieldName, modifiedDateTime) {
      this.axios.get("/pmph/action/knowledgeLib/selectCompareData", {
        params: {
          fieldName: fieldName,
          modifiedDateTime: modifiedDateTime
        }
      }).then((res) => {
        this.oldValue = res.data.oldValue
        this.newValue = res.data.newValue
        this.modifyTime = modifiedDateTime
        this.fieldName = fieldName
        this.dialogVisible = true
      }).catch((err) => {
        console.error(err)
      })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage - 1
      this.reloadTableData()
    },
    reloadTableData() {
      this.axios.get("/pmph/action/knowledgeLib/selectModifiedTempKnowledgeFields", {
        params: {
          knowledgeId: this.id,
          status: this.status,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then((res) => {
        this.tableData = res.data.tableData
        this.totalNum = res.data.totalNum
        this.multiplePages = this.totalNum > this.pageSize
        this.knowledgeName = res.data.knowledgeName
        this.$emit("released")
      })
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 200
    this.multiplePages = true
    this.reloadTableData()
  }
}
</script>

<style scoped>

</style>
